.img {
    position: relative;
    margin: 7vh auto;
    width: 260px;
    height: 260px;
  }
  @keyframes bgmove {
    from {
      height: 0;
    }
    to {
      height: 225px;
    }
  }
  .img-bg,
  .img-line {
    position: absolute;
    top: 17px;
    left: 17px;
    width: 225px;
    overflow: hidden;
  }
  .img-bg {
    animation: bgmove 4s linear infinite;
    animation-direction: alternate;
    z-index: 1;
  }
  .img-bg:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 225px;
    height: 225px;
    background: linear-gradient(0deg, transparent 0%, rgba(104, 24, 133, .3) 50%, transparent 100%);
    border-radius: 50%;
  }

  .img-line {
    z-index: 6;
    height: 225px;
    border-radius: 50%;
  }
  .img-line:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-bottom: 2px solid #2b6814;
    animation: bgmove 4s linear infinite;
    animation-direction: alternate;
  }